<template>
  <div id="app">
    <my-header :title="'vue学习项目'"></my-header>
    <div class="main">
      <transition>
        <router-view ref="component" :list="list" />
      </transition>
    </div>

    <font></font>
  </div>
</template>

<script>
import font from "./components/layout/font";
import myHeader from "./components/layout/header";
export default {
  name: "App",
  components: {
    font,
    myHeader
  },
  data: function() {
    return {
      list: []
    };
  },
  methods: {},
  created() {},
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (oldVal === "/home/newsList") {
        let component = this.$refs.component;
        this.list = component.list;
      }
    }
  }
};
</script>

<style>
#app {
  padding-top: 40px;
  padding-bottom: 50px;
  overflow-x: hidden;
  position: relative;
}
body {
  background-color: #fff;
  touch-action: none;
}

.v-enter {
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.v-enter-active,
.v-leave-active {
  transition-duration: 0.3s;
}

.preview figure {
  float: left;
  width: 30%;
  height:calc(30vw - 0px);
  margin: 1.5%;
}

.preview figure img {
  width: 100%;
  box-shadow: 0 0 8px #999;
  border-radius: 25px;
}
</style>
